<!--
 作者：ex_wangshuai
 日期：2016-10-08
 功能：首页（热门品牌，明星店铺，爆款产品入口，掌大局部分页面跳转链接，知己比部分页面跳转链接）
 参数：
 事件：dispatch派发事件响应（changeLoadingStatus，indusFirstPage），包括loading显示和掌大局第一个页面跳转
-->
<template>
  <div class="home">
    <confirm :show.sync="show" title="是否退出？" cancel-text="取消" confirm-text="确定" @on-confirm="onAction('确认')"></confirm>
    <div class="home-title">
      <div class="left-button" @click="back" type="button">&nbsp;</div>
      开普勒&sdot;观星台
    </div>
    <banner></banner>
    <monitor></monitor>
    <div style="height: 1.5vh;background:#eeeeee;"></div>
    <div class="home-indus">
      <p class="home-indus-title">·&nbsp;&nbsp;{{homeIndusTitle}}&nbsp;&nbsp;·</p>
      <ul class="clearfix">
        <li v-for="item in homeIndusList" class="li-box">
          <a v-link="{ path: item.url }">
            <div>
              <img :src="item.img" alt="">
            </div>
            <span>{{item.title}}</span>
          </a>
        </li>
      </ul>
    </div>
    <div style="height: 1.5vh;background:#eeeeee;"></div>
    <div class="home-peer">
      <p class="home-peer-title">
        ·&nbsp;&nbsp;{{homePeerTitle}}&nbsp;&nbsp;·
      </p>
      <ul class="clearfix" style="display:flex;align-items:center;justify-content:center">
        <li v-for="peerItem in homePeerList" class="li2-box">
          <a v-link="{ path: peerItem.url }">
            <div>
              <img :src="peerItem.img"/>
              <p class="PeerName">{{peerItem.name}}</p>
            </div>
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import Banner from './Banner.vue'
  import Monitor from './Monitor.vue'
  import Confirm from 'vux/dist/components/Confirm'

  export default{
    components: {
      Banner,
      Monitor,
      Confirm
    },
    data () {
      var data = {}
      data.show = false
      data.homeIndusTitle = '掌大局'
      data.homeIndusList = [
        {
          'img': './static/img/indus1.png',
          'url': '/industry/industryOviews?key=industryOviews',
          'title': '行业罗盘'
        },
        {
          'img': './static/img/indus2.png',
          'url': '/industry/performance?key=performance',
          'title': '品牌军师'
        },
        {
          'img': './static/img/indus3.png',
          'url': '/industry/productInfo?key=productInfo',
          'title': '产品顾问'
        },
        {
          'img': './static/img/indus4.png',
          'url': '/industry/experienceIndex?key=experienceIndex',
          'title': '品质卫士'
        }
      ]
      data.homePeerTitle = '知己彼'
      data.homePeerList = [
        { 'name': '品牌对比', 'img': './static/img/peer1.png', 'url': '/peer/brandOverallComparison?key=brandOverallComparison' },
        { 'name': '产品对比', 'img': './static/img/peer2.png', 'url': '/peer/productOverallComparison?key=productOverallComparison' }
        // { 'name': '店铺对比', 'img': './static/img/peer3.png', 'url': '' }
      ]
      return data
    },
    methods: {
      back: function () {
        this.show = true
      },
      onAction: function (value) {
        if (value === '确认') {
          window.cordova.exec(function (success) {
          }, function (error) {
            window.alert('Error: ' + error)
          }, 'MideaCommon', 'exit', [])
        } else {
        }
      }
    },
    ready: function () {
      var _this = this
      /* eslint-disable */
      /* 测试返回按键 */
      var exitApp = function () {
        if(_this.$route.name === '/home'){
          _this.show = true
        } else {
          window.history.back()
        }
      }
      document.addEventListener('backbutton', exitApp, true)
      // 获取知己比列表以及第一个页面
      this.$http.post(window.interface.peerNav, {}).then(function (res) {
        var resData = res.json().data
        var mkeyAll = []
        var tabList = []
        var contentList = []
        for (var i = 0; i < resData.length; i++) {
          // 导航列表数据
          tabList.push({'order': resData[i].order - 1, 'name': resData[i].name})
          contentList.push(resData[i].childs)
          // 得到所有的mkey
          for (var j = 0; j < resData[i].childs.length; j++) {
            for (var k = 0; k < resData[i].childs[j].childs.length; k++) {
              mkeyAll.push(resData[i].childs[j].childs[k].mkey)
            }
          }
        }
        // 列表数据存入localstorage
        window.sessionStorage.setItem('peerTabList', JSON.stringify(tabList))
        window.sessionStorage.setItem('peerContentList', JSON.stringify(contentList))
        // mkey数组存入localStorage，用于页面翻页
        window.sessionStorage.setItem('peerMkeyAll', JSON.stringify(mkeyAll))
        // 默认跳转第一个
//        var firstMkey = mkeyAll[0]
//        this.$route.router.go('/peer/' + firstMkey + '?key=' + firstMkey)
        this.brandLink = resData[0].childs[0].mkey
        this.productLink = resData[1].childs[0].mkey
//        this.storeLink = resData[2].childs[0].childs[0].mkey || ''
      })
    },
    created () {
      // 获取掌大局列表以及第一个页面
      this.$http.get(window.interface.indusNav, {_timeout: 10000}).then(function (res) {
        var resData = res.json().data
        var mkeyAll = []
        var tabList = []
        var contentList = []
        for (var i = 0; i < resData.length; i++) {
          // 导航列表数据
          tabList.push({'order': resData[i].order - 1, 'name': resData[i].name})
          contentList.push(resData[i].childs)
          // 得到所有的mkey
          for (var j = 0; j < resData[i].childs.length; j++) {
            for (var k = 0; k < resData[i].childs[j].childs.length; k++) {
              mkeyAll.push(resData[i].childs[j].childs[k].mkey)
            }
          }
        }
//        掌大局品牌军师第一个页面
        this.homeIndusList[1].url = '/industry/' + resData[1].childs[0].mkey
//        掌大局产品顾问第一个页面
        this.homeIndusList[2].url = '/industry/' + resData[2].childs[0].mkey
//        掌大局品质卫士第一个页面
        this.homeIndusList[3].url = '/industry/' + resData[3].childs[0].mkey
        // 列表数据存入sessionStorage
        window.sessionStorage.setItem('tabList', JSON.stringify(tabList))
        window.sessionStorage.setItem('contentList', JSON.stringify(contentList))
        // mkey数组存入sessionStorage，用于页面翻页
        window.sessionStorage.setItem('mkeyAll', JSON.stringify(mkeyAll))
        // 默认跳转第一个
        // var firstMkey = mkeyAll[0]
        var firstMkey = 'industryHome'
        this.$dispatch('indusFirstPage', firstMkey)
      }, (res) => {
      })
    }
  }
</script>

<style lang="scss" scoped>
  .home{
    margin-bottom: 7.4vh;
    padding-top: 6.6vh;
    /*height: 86vh;*/
    /*overflow: auto;*/
  }
  .home-title{
    text-align: center;
    height: 6.6vh;
    width: 100%;
    line-height: 6.6vh;
    font-size: .35rem;
    color: #000;
    position: fixed;
    top:0;
    left:0;
    z-index:101;
    background: #fff;
  }
  .home-indus-title{
    height: 0.98rem;
    line-height: 0.98rem;
    font-size: 0.28rem;
    text-align: center;
    color: #999999;
  }
  .li-box{
    width: 50%;
    height: 1.58rem;
    float: left;
    box-sizing: border-box;
  }
  .li-box:nth-child(odd){
    border-top: 1px solid rgb(238, 238, 238);
    border-right: 1px solid rgb(238, 238, 238);
  }
  .li-box:nth-child(even){
    border-top: 1px solid rgb(238, 238, 238);
  }
  .li-box>a{
    display: block;
    width: 100%;
    height: 100%;
  }
  .li-box div{
    float: left;
    width: 1.46rem;
    height: 100%;
  }
  .li-box img{
    height: 0.84rem;
    display: block;
    margin-top: 0.37rem;
    float: right;
  }
  .li-box span{
    font-size: 0.28rem;
    height: 100%;
    line-height: 1.58rem;
    float: left;
    padding-left: 11%;
    color: #333;
  }
  .home-peer ul{
    padding: 0 0.5%;
  }
  .home-peer-title{
    height: 0.98rem;
    line-height: 0.98rem;
    font-size: 0.28rem;
    text-align: center;
    color: #999999;
    border-bottom: 1px solid rgb(238, 238, 238);
  }
  .li2-box{
    width: 33%;
    height: 2.54rem;
    float: left;
    box-sizing: border-box;
    padding: 0.28rem 0;
  }
  .li2-box div{
    height: 1.98rem;
    width: 2.26rem;
    position: relative;
    margin: auto;
  }
  .li2-box div img{
    height: 100%;
    display: block;
  }
  .li2-box div p{
    position: absolute;
    width: 100%;
    text-align: center;
    bottom: 5.5%;
    color: #fff;
    z-index: 10;
  }
  .left-button{
    width: .5rem;
    height: 100%;
    position: absolute;
    left: 0.38rem;
    top: 0;
    background: url('../../../static/img/btn-back.png') no-repeat center right;
    background-size: 100%;
  }
</style>
